<template>
  <div>
    <Nav />
    <div class="allContent">
      <div class="header" style="width:800px;float:left;margin-top:80px">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in sildeImgs" :key="item">
            <img style="width:800px;height:300px;object-fit:cover" :src="item" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="rightContent">
          <div>
              <img style="width:150px;height:150px;margin-left:130px" :src="imagePath2" alt="">
              <p class="sentence">立身以立学为先</p>
              <p class="sentence">立学以读百书为本</p>
              <p class="sentence" style="margin-left:200px">-----欧阳修</p>
          </div>
      </div>
      <div id="book">
          <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="畅销图书榜" name="first">
            <div class="bookArrange" v-for="item in bookContent" :key="item.bId">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook(item.bId)">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none" @click="goBuy(item.bId)">购买</el-button></span>
              </p>
            </div>
            </div>

            
            </el-tab-pane>
          <el-tab-pane label="新书热卖"  name="second">
            <div class="bookArrange" v-for="item in bookContent1">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="文学/小说" name="third">
                  <div class="bookArrange" v-for="item in bookContent2">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="生活/艺术" name="fourth">
                  <div class="bookArrange" v-for="item in bookContent3">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="社科/经营"  name="five">
                  <div class="bookArrange" v-for="item in bookContent4">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="教材/教辅"  name="six">
          <div class="bookArrange" v-for="item in bookContent1">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
            </el-tab-pane>
          <el-tab-pane label="童书/育儿"  name="seven">
          <div class="bookArrange" v-for="item in bookContent3">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="历史"  name="eight">
                       <div class="bookArrange" v-for="item in bookContent4">
            <div class="bookPicture">
              <img style="width:150px;height:150px;padding-top:20px;padding-left:10px" :src="item.showImg" alt="">
            </div>
            <div class="bookContent">
              <h3 class="bookContent_title" @click="goBook">{{item.bName}}</h3>
              <p class="bookContent_introduce">{{item.bookIntroduce}}</p>
              <p class="bookContent_price">￥<span>{{item.sale}}</span>
              <span class="bookContent_buy"><el-button type="primary" icon="el-icon-s-finance" style="background-color: red;border:none">购买</el-button></span>
              </p>
            </div>
            </div>
          </el-tab-pane>
          </el-tabs>         
      </div>
       
    </div>
   
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue'
    export default{
        name:'BookShop',
        data(){
            return{
                activeName: 'first',
                imagePath2:require('../../assets/images/D.png'),
                sildeImgs:['https://dpic.tiankong.com/d0/bx/QJ6810458630.jpg','https://dpic.tiankong.com/8r/ks/QJ6273648289.jpg','https://dpic.tiankong.com/nt/65/QJ6205214447.jpg','https://dpic.tiankong.com/ud/nn/QJ7100415173.jpg'],
                bookContent:[],
                bookContent1:[],
                bookContent2:[],
                bookContent3:[],
                bookContent4:[],
                bookContent5:[],
            }
        },
    components:{
      Nav,
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      goBook(bId){
        this.$store.state.bookId = bId
        this.$router.push('/mainshow/bookcontent')
      },
      goBuy(bId){
        this.$store.state.bookId = bId
        this.$router.push('/mainshow/buy')
      }
    },
    created(){
      this.$axios.get('http://localhost:3000/bookShop/getBooks',{params:{classify:1}})
      .then(res=>{
        console.log('res',res)
        this.bookContent = res.data.data
      })
      .catch(err=>{
        console.log('err',err)
      })

      this.$axios.get('http://localhost:3000/bookShop/getBooks',{params:{classify:2}})
      .then(res=>{
        console.log('res',res)
        this.bookContent1 = res.data.data
      })
      .catch(err=>{
        console.log('err',err)
      })

      this.$axios.get('http://localhost:3000/bookShop/getBooks',{params:{classify:3}})
      .then(res=>{
        console.log('res',res)
        this.bookContent2 = res.data.data
      })
      .catch(err=>{
        console.log('err',err)
      })
      this.$axios.get('http://localhost:3000/bookShop/getBooks',{params:{classify:4}})
      .then(res=>{
        console.log('res',res)
        this.bookContent3 = res.data.data
      })
      .catch(err=>{
        console.log('err',err)
      })
      this.$axios.get('http://localhost:3000/bookShop/getBooks',{params:{classify:5}})
      .then(res=>{
        console.log('res',res)
        this.bookContent4 = res.data.data
      })
      .catch(err=>{
        console.log('err',err)
      })
    }

    }
</script>
<style lang='scss'>

.bookContent_title{
  font-size: 20px;
  margin-top: 10px;
  font-family: Microsoft JhengHei;
}
.bookContent_introduce{
  width: 750px;
  height: 80px;
  font-family: Microsoft JhengHei;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 20px;
}
.bookContent_price{
  font-size:25px;
  margin-top: 5px;
  color: red;
}
.bookContent_buy{
  float: right;
  margin-right: 50px;
  position: relative;
  top:-6px;
}
.bookContent{
  width: 1000px;
  height: 200px;
  /* background-color: red; */
  float: left;
  margin-left: 40px;
}
.bookPicture{
  width: 150px;
  height: 200px;
  float: left;
}
#book{
    float: left;
}
.bookArrange{
    width: 1200px;
    height: 200px;
    border: 1px solid #ccc;
    border-bottom: none;
    box-shadow: 1px 1px 5px #ccc;
    background-color: white;
    
}
.sentence{
    font-size: 25px;
    font-family: 楷体;
    margin-left: 100px;
    margin-top: 10px;
}
.el-carousel  /deep/.el-carousel__indicators{
  position: absolute;
  top: 280px;
  left: 300px!important;
}
.rightContent{
    width: 400px;
    background-color: rgb(240, 235, 235);
    height: 300px;
    float: right;
    margin-top: 90px;
}
.allContent {
  width: 1200px;
  height: 600px;
  position: relative;
  left: 50%;
  margin-left: -600px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
p{
  margin-bottom: 0rem;
}
#Article .main h1, h2, h3{
  padding: 0 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel ul {
  position: unset;
}
.el-carousel{
  height:310px ;
}
.header .el-carousel__item, .el-carousel__mask{
        height: 300px!important;
    }
.el-carousel__item{
    width: 800px!important;
}
.el-carousel__container{
    height:300px!important;
}
</style>